<template>
  <div class="out_01">
    <div style="width: 35%">
      <videoPlayer class="vjs-custom-skin videoPlayer" :options="playerOptions"></videoPlayer>
    </div>
  </div>

</template>
<script>
  import 'video.js/dist/video-js.css'
  import {videoPlayer} from 'vue-video-player'
  import 'videojs-flash'

  export default {
    components: {
      videoPlayer
    },
    data () {
      return {
        playerOptions: {
          height: '300',
          sources: [{
            type: 'rtmp/mp4',
            src: '' //rtmp流地址
          }],
          techOrder: ['flash'],
          autoplay: false,
          controls: true,
          poster: '',
          nsPlayer:{bufferTime : 0.1}
        }
      }
    },
    methods:{
      // geturl:function () {
      //   this.playerOptions.sources[0].src='rtmp://10.12.154.7:1935/cctvf/test'
      // }
    },
    mounted(){
      // this.playerOptions.sources[0].src='rtmp://10.12.154.7:1935/cctvf/test'
      this.playerOptions.sources[0].src='rtmp://58.200.131.2:1935/livetv/hunantv'
    }
  }

</script>
<style>
  .out_01{
    width: 100%;
    height: 100%;
    background-color: red;
  }
</style>
